import { Button, View, Image } from "@tarojs/components"
// import { View, Image } from '@tarojs/components';
import Taro from "@tarojs/taro";
import { useEffect, useState } from "react";
import { AtFloatLayout, AtIcon } from "taro-ui";

import issImg from "./img/issImg.jpg";
import WeChat from "../../pages/postBar/img/WeChat.png";
import shareCard from "../../pages/postBar/img/shareCard.png";
import share from "../../pages/postBar/img/share.png";
import comment from "../../pages/postBar/img/comment.png";
import like1 from "../../pages/postBar/img/like1.png";
import like2 from "../../pages/postBar/img/like2.png";


const Forum = () => {
    const [isOpen, setOpen] = useState(false);
    const [isRight, setRight] = useState(true);
    //保存从数据库里拿到的帖子
    const [dataAll, setDataAll] = useState([])
    useEffect(() => {
        Taro.cloud.callFunction({
            name: "comments",
            data: {
                $url: "findAll"
            }
        }).then(res => {
            console.log("所有帖子", res.result.all)
            setDataAll(res.result.all)
        })
    }, [])
    //分享跳转
    const handleClick3 = () => {
        Taro.navigateTo({
            url: '/pages/details/shareCard/shareCard'
        })
    }
    //跳转到详细页面
    const handleClick4 = oneData => {
        console.log("Data:", oneData)
        let value = JSON.stringify(oneData)
        Taro.navigateTo({
            url: '/pages/postBar/comment/comment?oneData=' + encodeURIComponent(value),
        });
    };



    const changeOpen = () => {
        setOpen(true)
    }
    const changeRight = () => {
        setRight(!isRight)
    }
    // console.log("图片:",Array.from(dataAll[3].picture))
    // console.log("图片:", dataAll[0] === undefined ? undefined : dataAll[0].picture)
    const data = dataAll.map(item => (
        <View>
            <View className="content1">
                <View className="content1User">
                    {/* 用户头像 */}
                    <Image
                        style="width: 40px;height: 40px; border-radius:50%;"
                        src={item.author_url}
                    ></Image>
                    {/* 用户名 地区 */}
                    <View className="contentName">
                        <View>{item.author}</View>
                        <View>地区</View>
                    </View>

                </View>

                <View onClick={() => { handleClick4(item) }}>
                    <View className="content1Text">
                        {item.contents}
                    </View>
                    <View className="content1Img">
                        <View>
                            <Image mode="center" style="width:150px;height:150px;border-radius: 10px;" src={item.picture[0]}></Image>
                        </View>
                        {/* <Image style="width:350px;height:200px" src={item.picture.}></Image> */}
                    </View>
                </View>
                {/* 分享 评论 点赞 */}
                {/* 分享 */}
                <View className="contentShare">
                    <Button className="shareBottom" openType="share" onClick={() => changeOpen()}>
                       <Image style="width:25px;height:25px" src={share}/>
                    </Button>
                   

                    {/* 评论 */}
                    <View>
                        {/* <AtIcon
                            onClick={()=>{handleClick4(item)}}
                            className="message"
                            value="message"
                            size="25"
                            color="#000"
                        ></AtIcon> */}
                        <Image style="width:25px;height:25px" src={comment}></Image>
                    </View>

                    {/* 点赞 */}
                    <View
                        onClick={() => {
                            changeRight();
                        }}
                    >
                        {isRight ? (
                            <Image style="width:25px;height:25px" src={like1}></Image>
                        ) : (
                            <Image style="width:25px;height:25px" src={like2}></Image>
                        )}
                    </View>
                </View>
            </View>
        </View>
    ))

    return (
        <View>
            {/* <View className="content1"> */}
            {/* 数据的展示 */}
            {data}

            {/* </View> */}
        </View>
    )
}
export default Forum
// item.picture.map(pic => (
//     <View>
//         <Image mode="aspectFit" style="width:350px;height:400px" src={pic}></Image>
//     </View>
// ))

